import React, { Component, PropTypes } from 'react';
import styles from './PointsList.less';

class PointsList extends Component {

  render() {
    const length = this.props.points.length;
    let total = 0;
    const items = [];
    this.props.points.forEach((item, index) => {
      total += item.score;
      items.push(
        <li key={index}>
          <span className={styles.No}>{length - index}.</span>
            <span className={styles.name}>{item.name}</span>
          <span className={styles.ItemScore}>{item.score}</span>
        </li>
      );
    })
    if (length > 0) {
      return <div className={`${styles.pointsList} ${this.props.className}`}>
              <div className={styles.title}>
                <span className={styles.dot}></span>
                <span className={styles.name}>{this.props.points[length - 1].name}</span>
                <span className={styles.score}>{this.props.points[length - 1].score}</span>
              </div>
              <div className="clearfix">
                <ul className={styles.pointlist}>
                {items}
                </ul>
              </div>
              <div className={styles.footer}>本次累计积分&nbsp;&nbsp;:&nbsp;&nbsp;&nbsp;
                <span className={styles.totalscore}>{total}</span>
              </div>
<div className="clearfix" />
        </div>
    }
    return null;
  }
}

PointsList.propTypes = {
};

export default PointsList;
